<!-- 首页 -->
<template>
  <div>
    <van-popup v-model:show="show" position="right" class="sidebar" @close="closeSideBar">
      <SideBar @closeSideBar="closeSideBar"></SideBar>
    </van-popup>
    <div class="top">
      <div>
        <Logo></Logo>
      </div>
      <div>
        <svg-load name="user" class="rightImg" @click="openSideBar"></svg-load>
      </div>
    </div>
    <div class="carousel">
      <van-swipe :autoplay="3000" lazy-render :loop="true" :show-indicators="false">
        <van-swipe-item v-for="(item, index) in carouselList" :key="index">
          <image-load
            :filePath="item.imgUrl"
            alt=""
            class="carouselItem"
            @click="linkto(item.detailUrl)"
          />
        </van-swipe-item>
      </van-swipe>
    </div>
	
    <div class="currentList">
      <div
        class="item centerItem"
        v-for="(item, index) in dataList.filter((it, idx) => {
          return idx < 4
        })"
        :key="index"
        @click="linkTo(item)"
      >
        <div class="itemTop ff-num">{{ item.showSymbol }}</div>
        <div
          :class="[
            _isRFD(
              tradeStore.allCoinPriceInfo[item.coin]?.openPrice,
              tradeStore.allCoinPriceInfo[item.coin]?.close
            ),
            'rfd-sign itemMain ff-num'
          ]"
        >
          {{ tradeStore.allCoinPriceInfo[item.coin]?.priceChangePercent }}%
        </div>
        <div
          :class="[
            _isRFD(
              tradeStore.allCoinPriceInfo[item.coin]?.open,
              tradeStore.allCoinPriceInfo[item.coin]?.close
            ),
            'itemFooter fw-num'
          ]"
        >
          {{ tradeStore.allCoinPriceInfo[item.coin]?.close }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useTradeStore } from '@/store/trade/index'
import { useMainStore } from '@/store/index.js'
import { useRouter } from 'vue-router'
import { onMounted } from 'vue'
import { publiceNotice } from '@/api/common/index'
import { computed } from 'vue'
import SideBar from '@/views/home/sidebar/index.vue'

const show = ref(false)
const openSideBar = () => {
  show.value = true
}
const closeSideBar = () => {
  show.value = false
}
const tradeStore = useTradeStore()
const mainStroe = useMainStore()
const $router = useRouter()

const dataList = computed(() => {
  let tempData = []
  let tempFilterKey = mainStroe.getHomeCoinList.map((item) => {
    if (item.isOpen == 'true') {
      return item.coin
    }
  })
  tempFilterKey.forEach((elem) => {
    tradeStore.secondContractCoinList.forEach((elem2) => {
      if (elem2.coin == elem) {
        tempData.push(elem2)
      }
    })
  })
  return tempData
})

const linkTo = (item) => {
  mainStroe.setTradeStatus(Number(0))
  $router.push(`/trade?symbol=${item.coin}`)
}
const carouselList = ref([])
const linkto = (detailUrl) => {
  if (detailUrl.includes('http')) {
    location.href = detailUrl
  } else {
    $router.push(`${detailUrl}`)
  }
}

onMounted(async () => {
  try {
    const res = await publiceNotice('ACTIVITY_NOTICE', 'HOME_ACTIVITY ')
    if (res.code === 200) {
      carouselList.value = res.data.filter((item) => {
        return item.status != '1'
      })
    }
  } catch (error) {}
})
</script>

<style lang="scss" scoped>
:deep(.sidebar) {
  max-width: var(--ex-max-width);
  width: 100vw;
  height: 100vh;
  right: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform right left var(--van-duration-base);
}



/* ✅ 让 logo（位于 .top 内）层级正常，但低于侧边栏 */
.top {
  height: 52px;
  background: var(--ex-default-background-color);
  border-radius: 5px;
  padding: 15px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 100; /* 这里调低，确保不会压过弹层 */

  .rightImg {
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
}

.carousel {
  padding: 0 15px;
  margin: 10px 0;
  
  :deep(.van-swipe) {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    
    .van-swipe-item {
      width: 100%;
      height: 100%;
      
      .carouselItem {
        width: 100%;
        height: 150px;
        border-radius: 12px;
        object-fit: cover;
        display: block;
      }
    }
    
    .van-swipe__track {
      display: flex;
      padding-bottom: 2px;
    }
  }
}

.currentList {
  margin: 15px 15px 20px;
  background-color: var(--ex-home-box-background-color);
  box-shadow: 0px 1px 10px 1px rgba(5, 5, 5, 0.1);
  border-radius: 10px;
  display: flex;
  padding: 20px 0;
  
  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    
    .itemTop {
      font-size: 14px;
      color: var(--ex-default-font-color);
      font-weight: 400;
      margin-bottom: 6px;
    }
    
    .itemMain {
      font-size: 14px;
      margin: 4px 0;
    }
    
    .itemFooter {
      font-size: 16px;
      font-weight: 500;
      margin-top: 8px;
    }
    
    &.centerItem {
      justify-content: center;
    }
  }
}
</style>
